<template>
    <div class="mx-4 mt-4 p-4 box-border rounded-lg flex justify-between items-center bg-gray-50">
        <!-- 未登录 -->
        <div v-if="!token" class="flex items-center" @click="toLogin">
            <nut-avatar size="large" class="rounded-full overflow-hidden">
                <img :src="avatar" />
            </nut-avatar>
            <p class="ml-4">未登录，点击登录</p>
        </div>
        <!-- 已登录 -->
        <template v-else>
            <div class="flex items-center">
                <nut-avatar size="large" class="rounded-full overflow-hidden">
                    <img :src="avatar" />
                </nut-avatar>
                <p class="ml-4">{{ nickName }}</p>
            </div>

            <IconFont name="setting" @click="linkToSetting()"></IconFont>
        </template>
    </div>

    <!-- 按钮列表 -->
    <orderListBtnCom></orderListBtnCom>

    <!-- 身份模块 -->
    <div class="mx-4 mt-3 box-border rounded-lg flex justify-between items-center">
        <nut-cell title="你的身份" :desc="UserLevelName[level] || '游客'"></nut-cell>
    </div>

    <!-- 身份功能模块 -->
    <div
        v-if="[UserLevel.ADMIN, UserLevel.SELLER].includes(level)"
        class="mx-4 mt-4 p-4 box-border rounded-lg flex justify-between items-center bg-gray-50"
    >
        <nut-button v-if="level === UserLevel.ADMIN" type="primary">用户管理</nut-button>
        <nut-button type="primary">商品管理</nut-button>
    </div>
</template>

<script lang="ts" setup>
import Taro from '@tarojs/taro'
import orderListBtnCom from './orderListBtnCom.vue'
import { IconFont } from '@nutui/icons-vue-taro'
import { ref } from 'vue'
import { UserLevel, UserLevelName } from '@/config/index'

const avatar = ref(Taro.getStorageSync('avatar') || '')
const nickName = ref(Taro.getStorageSync('nickName') || '')
const token = ref(Taro.getStorageSync('token') || '')
const level = ref(Taro.getStorageSync('level') || '')

const linkToSetting = () => {
    Taro.navigateTo({
        url: `/pages/mine/setting/index`
    })
}

const toLogin = () => {
    Taro.navigateTo({
        url: `/pages/mine/login/index`
    })
}
</script>
